@import "../../style.scss";

.login{
    @include useTheme($themes) { 
        height: 100vh;
        background-color: themed('bgColor');
        display: flex;
        align-items: center; 
        justify-content: center; 
        .card{
            width: 50%;
            min-width: 500px;
            max-width: none;
            min-height: 600px;
            background-color: themed('sideBarColor');
            display: flex;
            flex-direction: row;
            // flex-direction: row-reverse;
            overflow: hidden;
            border-radius: 10px;
            position: relative;

            .left, .right{
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 30px;
                padding: 50px 30px;
                h1{

                }
                form{
                    display: flex;
                    flex-direction: column;
                    gap: 30px;
                    input{
                        border: none;
                        border-bottom: 2px solid darkgray;
                        padding: 10px 10px;
                        background-color: rgba($color: #000000, $alpha: 0);
                    }
                    button{
                        width: 50%;
                        padding: 10px;
                        border: none;
                        background-color: themed('textBarColor');
                        color: themed('textColor');
                        font-weight: bold;
                        cursor: pointer;
                    }
                }
            }

            .cover{
                width: 50%;
                height: 100%;
                border-radius: 10px;
                // background: linear-gradient(rgba($c1, 1), rgba($c4, 1));
                background: themed('navBarColor');
                padding: 50px 30px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 30px;
                justify-content: flex-end;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
                transition: transform 0.5s ease; /* 添加过渡效果 */
                h1{
                    position: absolute;
                    top: 0;
                    line-height: 100px;
                }
                p{

                }
                span{

                }
                button{
                    width: 50%;
                    padding: 10px;
                    border: none;
                    background-color: themed('textColor');
                    color: themed('bgColor');
                    font-weight: bold;
                    cursor: pointer;
                }
            }
            .cover.move {
                right: 0; 
                transform: translateX(100%);
            }
        }
    }
}